@use "lib/viewport";

.fk-d-menu[class*="toolbar-menu"] {
  z-index: z("composer", "dropdown");

  @include viewport.from(sm) {
    // making sure it's only limited in height on floating menu, not mobile menu
    &.fk-d-menu {
      max-height: 30vh;
    }
  }

  .fullscreen-composer & {
    z-index: z("header") + 1;
  }

  // eventho mobile composer shouldnt be used in conjuction with fk-d-menu (floating version), on tablets the possibility unfortunately exists
  .discourse-touch & {
    z-index: z("mobile-composer");
  }

  .shortcut {
    @include viewport.until(sm) {
      display: none;
    }
  }
}

.toolbar-menu__heading-content {
  .dropdown-menu {
    .btn {
      &.--active {
        .d-button-label__active-icon {
          visibility: visible;
          margin-left: auto;
        }
      }

      &:hover,
      &:focus,
      &:focus-visible {
        .shortcut {
          display: block;
        }

        .d-button-label__active-icon {
          visibility: hidden;
        }
      }
    }

    .d-button-label {
      position: relative;
      flex-grow: 1;
      display: flex;
      align-items: center;
      gap: var(--space-4);

      &__active-icon {
        visibility: hidden;
      }

      &__text {
        padding-right: var(--space-8); // extra spacing for the shortcut
      }

      .shortcut {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        margin: 0;
        font-size: var(--font-down-1-rem);
      }
    }

    .btn[data-name="heading-1"] {
      .d-button-label__text,
      .d-icon[class*="d-icon-discourse"] {
        font-size: var(--font-up-2-rem);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-2"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-up-1-rem);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-3"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-0);
        font-weight: bold;
      }
    }

    .btn[data-name="heading-4"] {
      .d-button-label__text,
      .d-icon {
        font-weight: bold;
        font-size: var(--font-down-1-rem);
      }
    }

    .btn[data-name="heading-paragraph"] {
      .d-button-label__text,
      .d-icon {
        font-size: var(--font-down-1-rem);
      }
    }
  }
}
